<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基础模板</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 创建一个容器 -->
		 <div id="box">
		 	<h1>定义一个点击事件</h1>
			<button v-on:click='showMsg1'>点我提示信息1（不传参）</button>
			<button v-on:click='showMsg2(666,888,$event)'>点我提示信息2（传参）</button>
			<button @click='showMsg2(666,888,$event)'>点我提示信息2（简写形式）</button>
		 </div>
		 <script type="text/javascript">
		 	Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示
			//此种定义方式错误，被接管的容器无法调用实例外的函数或方法
			// function showMsg(){
			// 	alert('Hello!')
			// }
			// 创建一个vue实例
			new Vue({
				el:'#box',
				data:{
					
				},
				methods:{
					showMsg1(event){
						//alert('Hello!')
						console.log(event.target.innerText)
					},
					showMsg2(number1,number2){
						//alert('Hello!')
						console.log(event.target.innerText)
						console.log(number1,number2)
					}
				}
			})
		 </script>
	</body>
</html>